<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui" template="/layout/template.xhtml">
	<ui:define name="content"> 	
		<h:form id="principal">
			<p:growl autoUpdate="true" />
			<h1>#{mensaje.titulo_usuarios}</h1>
				<p:tabView id="tabView" >
					<p:tab id="tab1" title="#{mensaje.titulo_usuario}">
					<p:panel id = "panelTab1">
						<h:panelGrid columns="2">
							<p:outputLabel for="nombre" value="#{mensaje.label_nombre}" />
							<p:inputText id="nombre" value="#{usuarioBean.nombreUsuario}"
								required="true" />
							<p:outputLabel for="password" value="#{mensaje.label_password}" />
							<p:password id="password" value="#{usuarioBean.usuario.password}" />
						</h:panelGrid>
						<h:panelGrid columns="2">
							<p:pickList value="#{usuarioBean.dualListRol}" var="_rol"
									itemLabel="#{_rol.descripcion}" itemValue="#{_rol}" converter="#{rolConverter}" >
									<f:facet name="sourceCaption">Roles Disponibles</f:facet>
									<f:facet name="targetCaption">Roles Seleccionadas</f:facet>
							</p:pickList>

						</h:panelGrid>
						<h:panelGrid>
							<p:commandButton action="#{usuarioBean.guardar()}" value="#{mensaje.action_guardar}"   />
						</h:panelGrid>
					</p:panel>

					</p:tab>
					<p:tab id="tab2" title="#{mensaje.titulo_roles}">
					  <p:panel id="panelTab2">				
						<h:form id="rol_form">
							
							<h:panelGrid columns="4">
						
								<p:outputLabel for="nombre_rol" value="#{mensaje.label_nombre}" />

								<!-- En el value se pone en donde se va almacenar lo que se introduce en el input -->
								<p:inputText id="nombre_rol" value="#{rolBean.rol.descripcion}"
									required="true" />


							</h:panelGrid>
							<p:commandButton action="#{rolBean.guardar()}" value="#{mensaje.action_guardar}" update=":principal:tabView:panelTab2,:principal:tabView:panelTab1"  />
							
				        </h:form>	
							<h3>Seleccione la/s tareas que desea asignar al rol</h3>
							<h:panelGrid id = "rolGrid" columns="2">
								
								<p:pickList value="#{rolBean.tareas}" var="_tarea"
									itemLabel="#{_tarea.descripcion}" itemValue="#{_tarea}"
									converter="#{tareaConverter}">
									<f:facet name="sourceCaption">Tareas Disponibles</f:facet>
									<f:facet name="targetCaption">Tareas Seleccionadas</f:facet>
								</p:pickList>
							
							</h:panelGrid>
							<h:panelGrid>
							</h:panelGrid>
						
							
							
							<p:dataTable id="tabla_rol" value="#{rolList.findAll()}" var="_rol" >
			                
						         <p:column>
						               <f:facet name="header">#{mensaje.label_nombre}</f:facet>
						               #{_rol.descripcion}
						        </p:column>
			                
			                	<p:column>
						                    <f:facet name="header">#{mensaje.label_opciones}</f:facet>
						                    <p:commandButton action="#{rolBean.iniciar(_rol)}" value="#{mensaje.action_modificar}" update = ":principal:tabView:tabla" immediate="true"/>
						                    <p:commandButton action="#{rolBean.eliminar(_rol)}"
											value="#{mensaje.action_eliminar}" update=":principal:tabView:panelTab2" icon= "ui-icon-closethick"  immediate="true" />
						        </p:column>
	               
	           				</p:dataTable>
						</p:panel>													
					</p:tab>
					
					<p:tab id="tab3" title="#{mensaje.titulo_tareas}">
						<h:form id="tarea_form">
							<f:facet name="header">#{mensaje.titulo_tarea}</f:facet>
							<h3>Crear una nueva tarea.</h3>
							<h:panelGrid columns="2">
								<p:outputLabel for="nombre_tarea" value="#{mensaje.label_nombre}" />
									
								<p:inputText id="nombre_tarea"
									value="#{tareaBean.tarea.descripcion}" required="#{not empty param[save.clientId]}" />				
							</h:panelGrid>
							<p:commandButton action="#{tareaBean.guardar()}" value="#{mensaje.action_guardar}" binding="#{save}" process="@parent" 
									update=":principal:tabView:tabla,:principal:tabView:panelTab2"/>
     					</h:form>
							
						<p:dataTable id="tabla" value="#{tareaList.findAll()}" var="_tarea" >
			                
						         <p:column>
						               <f:facet name="header">#{mensaje.label_nombre}</f:facet>
						               #{_tarea.descripcion}
						        </p:column>
			                
			                	<p:column>
						                    <f:facet name="header">#{mensaje.label_opciones}</f:facet>
						                    <p:commandButton action="#{tareaBean.iniciar(_tarea)}" value="#{mensaje.action_modificar}" update = ":principal:tabView:tarea_form" immediate="true"/>
						                    <p:commandButton action="#{tareaBean.eliminar(_tarea)}"
											value="#{mensaje.action_eliminar}" update=":principal:tabView:tabla" icon= "ui-icon-closethick"  immediate="true" />
						        </p:column>
	               
	           			</p:dataTable>

					</p:tab>
				</p:tabView>
				<br />
		</h:form>
	</ui:define>
</ui:composition>